<%@ page import="java.util.Date" %><%--
  Created by IntelliJ IDEA.
  User: HelloKitty
  Date: 2021/5/22
  Time: 19:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <%-- 用以说明主页制作所使用的文字以及语言 --%>
    <meta http-equiv="Content-Type" content="text/html" charset='UTF-8"'>
    <meta http-equiv="Content-Language" content="zh-CN">
    <title>ajax的使用</title>
    <%-- 1、导入Jquery --%>
    <script src="webjars/jquery/1.12.3/dist/jquery.min.js" ></script>
    <%-- 2、设置绝对路径 --%>
    <% pageContext.setAttribute("projectClassPath",request.getContextPath()); %>
</head>
<body>
<%-- 3、体现，页面无刷新，只要new Date的时间不变，即可 --%>
<% new Date(); %>
    <%-- 4、发送ajax请求 --%>
    <a href="${projectClassPath}/getallajax">01、@ResponseBody：ajax获取所有员工</a>

<div></div>
</body>
<%-- 5、给超链接绑定单击事件 --%>
<script type="text/javascript">
    $("a:first").click(function () {
        //1）、发送ajax请求，获取所有员工
        $.ajax({
            url:"${projectClassPath}/getallajax",
            type:"GET",
            success:function (date) {
                //遍历，服务器返回的json数据
                $.each(date,function () {
                    // 将每次遍历的数据，放进div中
                    var empInfo = this.lastName +"--->"+ this.birth +"--->"+ this.gender;
                    $("div").append(empInfo+"<br/>");
                });
            }
        });
        //禁用，<a>标签的，页面跳转行为
        return false;
    });
</script>
</html>
